<template>
<div>
  <template v-for="(list, index) in recordLists" :key="list">
    <div class="record-item" v-loading="loading">
      <zdateIcon 
        :isShowIcon="false" 
        :dataDate="{showYear: list.showYear, showDay: list.showDay}"></zdateIcon>
      <div class="medical-detail">
        <div class="time">{{ setOldDay(list.createTime)}}</div>
        <div class="detail">
          <div class="f-2">
              <div class="detail-head">
                <div class="d-left">
                  <span>{{list.type + '病历'}}</span>
                  <span>诊断: {{ setAdditionalInfo(list.other, '诊断')}}</span>
                  <span>治疗: {{ setAdditionalInfo(list.other, '治疗计划')}}</span>
                </div>
                <div class="d-right" @click="seeDetails(Number(index) ,list.isActive)">
                  <span >详情</span>
                  <el-icon v-if="list.isActive" class="r90"><CaretBottom /></el-icon>
                  <el-icon v-else ><CaretBottom /></el-icon>
                  
                </div>
              </div>
              <div class="d-main" :class="{'hide': list.isActive}" v-if="!list.isActive">
                <div class="d-content">
                  <div class="d-example" v-for="item in arrList[index]" :key="item">
                    
                    
                    <!-- 特殊的展示 -->
                    <template v-if="item.title === '口腔检查' || item.title === '辅助检查' || item.title === '诊断' || item.title === '治疗计划' || item.title === '处置'">
                      <div class="special-template">
                        <div class="special-title">
                          {{item.title}}:
                        </div>
                        <div class="special-content" >
                          <div class="one-every-particular" v-for="t in item.list" :key="t">
                            <!-- 左侧展示十字架 -->
                            <div class="cross">
                              <div class="cross-left-top">
                                	<div style="display: inline-block" v-for="v in t.Tleft" :key="v">
                                      {{v.super}}
                                      <div v-if="v.super" style="display: inline-block">
                                        (
                                        <span v-if="v.isClick === 'left'" class="supernumerary">{{v.super}}</span>
                                        <span>{{v.id}}</span>
                                        <span v-if="v.isClick === 'right'" class="supernumerary">{{v.super}}</span>
                                        )
                                      </div>
                                      <div style="display: inline-block" v-else>
                                        <span v-if='v.isActive'>{{v.id}}</span>
                                      </div>
                                      <span class="sides" v-if="v.isActive">{{v.sub}}</span>
                                    </div>
                                  <!-- {{t.Tleft}} -->
                              </div>
                              <div class="cross-right-top">
                                  <div style="display: inline-block" v-for="v in t.Tright" :key="v">
                                      {{v.super}}
                                      <div v-if="v.super" style="display: inline-block">
                                        (
                                        <span v-if="v.isClick === 'left'" class="supernumerary">{{v.super}}</span>
                                        <span>{{v.id}}</span>
                                        <span v-if="v.isClick === 'right'" class="supernumerary">{{v.super}}</span>
                                        )
                                      </div>
                                      <div style="display: inline-block" v-else>
                                        <span v-if='v.isActive'>{{v.id}}</span>
                                      </div>
                                      <span class="sides" v-if="v.isActive">{{v.sub}}</span>
                                    </div>
                              </div>
                              <div class="cross-left-bottom">
                                  <div style="display: inline-block" v-for="v in t.Bleft" :key="v">
                                      {{v.super}}
                                      <div v-if="v.super" style="display: inline-block">
                                        (
                                        <span v-if="v.isClick === 'left'" class="supernumerary">{{v.super}}</span>
                                        <span>{{v.id}}</span>
                                        <span v-if="v.isClick === 'right'" class="supernumerary">{{v.super}}</span>
                                        )
                                      </div>
                                      <div style="display: inline-block" v-else>
                                        <span v-if='v.isActive'>{{v.id}}</span>
                                      </div>
                                      <span class="sides" v-if="v.isActive">{{v.sub}}</span>
                                    </div>
                              </div>
                              <div class="cross-right-bottom">
                                <div style="display: inline-block" v-for="v in t.Bright" :key="v">
                                      {{v.super}}
                                      <div v-if="v.super" style="display: inline-block">
                                        (
                                        <span v-if="v.isClick === 'left'" class="supernumerary">{{v.super}}</span>
                                        <span>{{v.id}}</span>
                                        <span v-if="v.isClick === 'right'" class="supernumerary">{{v.super}}</span>
                                        )
                                      </div>
                                      <div style="display: inline-block" v-else>
                                        <span v-if='v.isActive'>{{v.id}}</span>
                                      </div>
                                      <span class="sides" v-if="v.isActive">{{v.sub}}</span>
                                    </div>
                              </div>
                            </div>
                            <!-- 右侧文本 -->
                            <div class="cross-text">
                              {{t.val}}
                            </div>
                          </div>
                        </div>
                      </div>
                    </template>
                    <template v-else>
                      <span>{{item.title}}: </span>
                      <span>{{item.content}}</span>
                    </template>
                  </div>
                </div>

                <div class="d-footer">
                    <div class="btns">
                      <el-button class="btn-1" @click="handleOperationLog(list)">操作日志</el-button>
                      <el-button class="btn-1" @click="handlePrint">打印</el-button>
                    </div>
                </div>
              </div>
              <div class="d-main-footer" v-else>
                <span>主诉: <span>{{list.actionChief}}</span></span>
                <span>处置: <span>{{ setAdditionalInfo(list.other, '处置')}}</span></span>
                <span>医嘱: <span>{{ setAdditionalInfo(list.other, '医嘱')}}</span></span>
              </div>
          </div>
          <div class="f-1">
            <div class="head">
              <span @click="editItem(list)" v-jurisdiction="'customer:sick:history:update'">编辑</span>
              <span @click="deleteItem(list.id)" v-jurisdiction="'customer:sick:history:del'">删除</span>
            </div>
            <div class="content" v-if="!list.isActive">
              <div class="c-info" >
                <span>医生: {{list.doctorName}}</span>
                <span>助手: {{list.nurseName}}</span>
                <!-- <span>费用: 10</span> -->
                <!-- <span>诊所: 哈哈哈</span> -->
                <span>
                  <div>相关标签: </div>
                  <div class="tags">
                    <el-tag v-for="(tag, index) in list.labelIdsShow" :key="index" >{{tag && searchLabelList[tag]}}</el-tag>
                  </div>
                </span>
              </div>
            </div>
            <div class="footer" v-else>
              <span>医生: {{list.doctorName}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 空数据展示 -->
    <el-empty v-if="recordLists.length <= 0" description="暂无数据"></el-empty>
  </template>
</div>
  <!-- 编辑病历 -->
  <zdialog title="编辑病历" :width="'45%'" @handleClose="closeDialog" v-model="dialogVisible" :btnData="dialogBtnData">
      <template #body>
        <div class="body-content">
            <div class="flex-wrap">
              <div class="leftToRight-layout">
                <div class="label">
                  <span>医生</span>
                </div>
                <div class="operations">
                  <el-select  v-model="doctor" placeholder="请选择">
                      <el-option
                        v-for="item in doctorOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                  </el-select>
                </div>
              </div>
              <div class="leftToRight-layout">
                <div class="label">
                  <span>护士</span>
                </div>
                <div class="operations">
                  <el-select  v-model="nurse" placeholder="请选择" >
                      <el-option
                        v-for="item in nurseOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                  </el-select>
                </div>
              </div>
              <div class="leftToRight-layout">
                <div class="label">
                  <span>就诊时间</span>
                </div>
                <div class="operations">
                  <el-date-picker
                    type="datetime"
                    v-model="dateTime"
                    placeholder="选择日期"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    >
                </el-date-picker>
                </div>
              </div>
              <div class="leftToRight-layout">
                <div class="label">
                  <span>类型</span>
                </div>
                <div class="operations">
                  <el-radio-group v-model="type" class="radio-group-2">
                    <el-radio-button label="初诊">初诊病历</el-radio-button>
                    <el-radio-button label="复诊">复诊病历</el-radio-button>
                  </el-radio-group>
                </div>
              </div>
              <div class="leftToRight-layout" style="width: 100%">
                <div class="label">
                  <span>主诉</span>
                </div>
                <div class="operations">
                  <zinput ref="zhusu" @changValue="getZhusu" :textareaValue="zhusuVal"></zinput>
                </div>
              </div>
              <div class="leftToRight-layout" style="width: 100%">
                <div class="label">
                  <span>现病史</span>
                </div>
                <div class="operations">
                  <zinput ref="xianbingshi" @changValue="getXianbs" :textareaValue="xianbingshiVal"></zinput>
                </div>
              </div>
              <div class="leftToRight-layout" style="width: 100%">
                <div class="label">
                  <span>既往史</span>
                </div>
                <div class="operations">
                  <zinput ref="jiwangsi" @changValue="getjiwangs" :textareaValue="jiwangsiVal"></zinput>
                </div>
              </div>
              
            </div>
            <div class="leftToRight-layout p-b" style="width: 100%">
                <div class="label">
                  <span>口腔检查</span>
                </div>
                <div class="operations">
                  <zcompose
                          :toothList="ToothList" 
                          @addToothPosition="addToothPosition(ToothList)" 
                          @handleDelete="handleDelete" 
                          @changValue="changValue"
                          @getLeftData="getLeftData"
                          @getRightData="getRightData"
                          @getLeftBottomData="getLeftBottomData"
                          @getRightBottomData="getRightBottomData"
                    ></zcompose>
                </div>
              </div>
              <div class="leftToRight-layout p-b" style="width: 100%">
                <div class="label">
                  <span>辅助检查</span>
                </div>
                <div class="operations">
                  <zcompose ref="fuzhujiancha"
                                :toothList="ToothList1" 
                                @addToothPosition="addToothPosition(ToothList1)" 
                                @handleDelete="handleDelete"
                                @changValue="changValue1"
                                @getLeftData="getLeftData1"
                                @getRightData="getRightData1"
                                @getLeftBottomData="getLeftBottomData1"
                                @getRightBottomData="getRightBottomData1"
                      ></zcompose>
                </div>
              </div>
              <div class="leftToRight-layout p-b" style="width: 100%;">
                <div class="label" style="width: 80px;">
                  <span>诊断</span>
                </div>
                <div class="operations">
                  <zcompose ref="zhenduan"
                                :toothList="ToothList2" 
                                @addToothPosition="addToothPosition(ToothList2)" 
                                @handleDelete="handleDelete"
                                @changValue="changValue2"
                                @getLeftData="getLeftData2"
                                @getRightData="getRightData2"
                                @getLeftBottomData="getLeftBottomData2"
                                @getRightBottomData="getRightBottomData2"
                      ></zcompose>
                </div>
              </div>
              <div class="leftToRight-layout p-b" style="width: 100%">
                <div class="label">
                  <span>治疗计划</span>
                </div>
                <div class="operations">
                  <zcompose ref="zhiliaojihua"
                                :toothList="ToothList3" 
                                @addToothPosition="addToothPosition(ToothList3)" 
                                @handleDelete="handleDelete"
                                @changValue="changValue3"
                                @getLeftData="getLeftData3"
                                @getRightData="getRightData3"
                                @getLeftBottomData="getLeftBottomData3"
                                @getRightBottomData="getRightBottomData3"
                      ></zcompose>
                </div>
              </div>
              <div class="leftToRight-layout p-b" style="width: 100%" >
                <div class="label">
                  <span>处置</span>
                </div>
                <div class="operations">
                  <zcompose ref="chuzhi"
                                :toothList="ToothList4" 
                                @addToothPosition="addToothPosition(ToothList4)" 
                                @handleDelete="handleDelete"
                                @changValue="changValue4"
                                @getLeftData="getLeftData4"
                                @getRightData="getRightData4"
                                @getLeftBottomData="getLeftBottomData4"
                                @getRightBottomData="getRightBottomData4"
                      ></zcompose>
                </div>
              </div>
              <div class="leftToRight-layout p-b" style="width: 100%" >
                <div class="label">
                  <span>医嘱</span>
                </div>
                <div class="operations">
                  <zinput ref="yizhu"  @changValue="getyizhu" :textareaValue="yizhuVal"></zinput>
                </div>
              </div>
              <div class="leftToRight-layout p-b" style="width: 100%" >
                <div class="label">
                  <span>标签</span>
                </div>
                <div class="operations">
                  <el-select multiple  style="width: 100%" v-model="label" placeholder="请选择" >
                        <el-option
                          v-for="item in labelList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                        </el-option>
                    </el-select>
                </div>
              </div>
              <div class="leftToRight-layout p-b" style="width: 100%" >
                <div class="label">
                  <span>备注</span>
                </div>
                <div class="operations">
                  <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="remark">
                  </el-input>
                </div>
              </div>
          </div>
			</template>
    </zdialog>

  <!-- 操作日志 -->
  <zdialog title="操作日志" :width="'45%'" @handleClose="closeOperation" v-model="openOperation" :btnData="OperationBtnData">
    <template #body>
      <div class="operaation-log">
        <el-table
          :data="operationData"
          style="width: 100%">
          <el-table-column prop="createTime" label="操作时间" width="180" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="userName" label="操作人" >
          </el-table-column>
          <el-table-column prop="updateType" label="操作类型" >
          </el-table-column>
          <el-table-column prop="customerName" label="操作患者" >
          </el-table-column>
          <el-table-column prop="details" label="变更记录" width="240">
            <template #default="scope">
            <div v-for="i in scope.row.details">
              <span style="background: orange; color: white;">{{i.columnShowName}}</span> 
              <span >{{i.beforeValue || '无'}}</span> ->
              <span >{{i.afterValue}}</span>
            </div>
              
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>
  </zdialog>
</template>

<script lang="ts">

import { defineComponent, ref, reactive, toRefs, watch } from '@vue/runtime-core';
import zdateIcon from "../../../../components/styleBorder/dateIcon.vue";
import zdialog from '@components/dialog/dialog.vue'

import { CaretBottom } from '@element-plus/icons-vue'

import zinput from "./../components/zinput.vue"
import zcompose, { ToothList, ToothData } from "../../../../components/compose/compose.vue"
import { getFullToothData } from "../../../../usefn/getToothData"
import {Option} from "../../../../types"

import useRequet, { RespData } from "../../../../hook/network"
import { ElMessage, ElMessageBox } from 'element-plus'

type PositionList = {
  id: string,
  sub: string,
  super: string,
  isClick: string,
  isActive: boolean
}

type ToothType = {
  isDel: boolean,
  val: string,
  Tleft: PositionList[],
  Tright: PositionList[],
  Bleft: PositionList[],
  Bright: PositionList[],
}
type Doctors = {
  id: number,
  name: string,
  status?: string
}

export default defineComponent({
  props: {
    id: {
      type: String
    }
  },
  components: {
    zdateIcon,
    zdialog,

    zinput,
    zcompose,
    CaretBottom
  },
  emits: ['recordLength'],
  setup(props, ctx) {
    const request = useRequet({ path: "" });
    const list = reactive({
      loading: false
    })
    let id = props.id
    watch(() => props.id, (newID, prevID) => {
      console.log('改变了111', newID)
      id = newID
      getList()
    })
    const recordLists = ref([] as any)
    const temList = [
      {
        title:'主诉',
        content:'',
        list: []
      },
      {
        title:'现病史',
        content:'',
        list: []
      },
      {
        title:'既往史',
        content:'',
        list: []
      },
      {
        title:'口腔检查',
        content:'',
        list: []
      },
      {
        title:'辅助检查',
        content:'',
        list: []
      },
      {
        title:'诊断',
        content:'',
        list: []
      },
      {
        title:'治疗计划',
        content:'',
        list: []
      },
      {
        title:'处置',
        content:'',
        list: []
      },
      {
        title:'医嘱',
        content:'',
        list: []
      },

    ]
    const arrList = ref([] as any)
    const isHide = ref(false)
    const getList = () => {
      list.loading = true
      request.sendRequest({
        address: 'sick/history/getMedicalHistoryList',
        params: {
          customerId: Number(id)
        },
        success: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error(resp.msg || '获取信息失败')
          // console.log(resp.data)
          recordLists.value = resp.data || []
          console.log(recordLists.value)
          ctx.emit('recordLength', recordLists.value.length)
            arrList.value = []
            recordLists.value.forEach((item: any) => {
              
              item.isActive = true
              let obj = JSON.parse(item.other)
              let list = JSON.parse(JSON.stringify(temList))

                Object.keys(obj).forEach(key => {
                  let idx = list.findIndex((item: any) => {
                      return item.title === key
                    })
                    if(idx > -1) {
                      if(Object.prototype.toString.call(obj[key]) === '[object Object]') {
                        return
                      } else if (Object.prototype.toString.call(obj[key]) === '[object Boolean]') {
                        return
                      } else if (Object.prototype.toString.call(obj[key]) === '[object Array]') {
                        list[idx].content = obj[key][0].val
                        list[idx].list = obj[key]
                      }
                      else {
                        list[idx].content = obj[key]
                      }
                      
                    }
                })
              
              arrList.value.push(list)
          })
            console.log(arrList.value)
            if(recordLists.value.length > 0) {
              recordLists.value[0].isActive = false
            }

            list.loading = false
        },
        fail: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error(resp.msg)
          list.loading = false
        },
        method: "POST",
      }) 
    }

    const getDoctorAndNurse = () => {
      return new Promise((resolve, reject) => {
        // 获取护士
        request.sendRequest({
          address: 'company/user/user/getNurseUserByStatus',
          params: {
            name: ''
          },
          success: (resp: RespData) => {
            if(resp.code !== 0) return ElMessage.error(resp.msg || '获取信息失败')
            // console.log(resp.data)
            echoData.nurseOptions = resp.data
            resolve('')
          },
          fail: (resp: RespData) => {
            if(resp.code !== 0) return ElMessage.error(resp.msg)
            reject()
          },
          method: "POST",
        })
        // 获取医生
        request.sendRequest({
          address: 'company/user/user/getDoctorUserByStatus',
          params: {
            name: ''
          },
          success: (resp: RespData) => {
            if(resp.code !== 0) return ElMessage.error(resp.msg || '获取信息失败')
            // console.log(resp.data)
            echoData.doctorOptions = resp.data
            resolve('')
          },
          fail: (resp: RespData) => {
            if(resp.code !== 0) return ElMessage.error(resp.msg)
            reject()
          },
          method: "POST",
        }) 

      

      })
      
    }

    // 得到时间几天后
    const setOldDay = (date: string) => {
      let day = ''
      let currentTime = new Date().getTime()
      let receive = new Date(date).getTime()
      let ondDayTime = 60 * 60 * 24 * 1000
      let surplusTime = (currentTime - receive)

      if(surplusTime > 0) {
        let result = Math.floor(surplusTime / ondDayTime)
        if(result === 0) {
          day = '今天'
        } else {
          day = result + '天前'
        }
      }
      return day
    }

    // 设置头部附加信息
    const setAdditionalInfo = (RowData: any, type: string) => {
      let result = ''
      let data = JSON.parse(RowData)

      if(data[type]) {
        result = data[type][0].val
      }
      return result
    }

    // 获取标签
    const getLabel = () => {
      request.sendRequest({
        address: 'sick/history/getMedicalHistoryLabel',
        params: {},
        success: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error(resp.msg)
          console.log(resp.data)
          labelList.value = resp.data
          resp.data.forEach((item: Option) => {
            searchLabelList.value[item.id] = item.name
          })
        },
        fail: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error(resp.msg)
          
        },
        method: "GET",
      }) 
    }
    
    const seeDetails = (index: number, isActive: boolean) => {
      recordLists.value[index].isActive = !isActive
      // isHide.value = !isHide.value
    }

    const labelList = ref([] as Option[])
    const searchLabelList = ref({} as any)
    const echoData = reactive({
      doctor: '',
      doctorOptions: [] as Doctors[],
      nurse: '',
      nurseOptions: [] as Doctors[],
      dateTime: '',
      zhusuVal:'',
      xianbingshiVal: '',
      jiwangsiVal: '',
      yizhuVal: '',
      type: '',
      remark: '',
      label: [],
      id: ''
    })

    // 牙齿回显
    let ToothList = ref([getFullToothData()] as ToothList[])
    const ToothList1 = ref([getFullToothData()] as ToothList[])
    const ToothList2 = ref([getFullToothData()] as ToothList[])
    const ToothList3 = ref([getFullToothData()] as ToothList[])
    const ToothList4 = ref([getFullToothData()] as ToothList[])

    // 添加牙位
    const addToothPosition = (data:any) => {
      console.log('点击了添加牙位', data)
      let obj = getFullToothData(true)
      data.push(obj)
    }
    // 删除
    const handleDelete = (data:any, index: number) => {
      data.splice(index, 1)
    }
    const getLeftData = (leftData: ToothData[], index: number) => {
      
      ToothList.value[index].Tleft = leftData
    }
    const getLeftData1 = (leftData: ToothData[], index: number) => {
      ToothList1.value[index].Tleft = leftData
    }
    const getLeftData2 = (leftData: ToothData[], index: number) => {
      ToothList2.value[index].Tleft = leftData
    }
    const getLeftData3 = (leftData: ToothData[], index: number) => {
      ToothList3.value[index].Tleft = leftData
    }
    const getLeftData4 = (leftData: ToothData[], index: number) => {
      ToothList4.value[index].Tleft = leftData
    }

    const getRightData = (leftData: ToothData[], index: number) => {
      ToothList.value[index].Tright = leftData
    }
    const getRightData1 = (leftData: ToothData[], index: number) => {
      ToothList1.value[index].Tright = leftData
    }
    const getRightData2 = (leftData: ToothData[], index: number) => {
      ToothList2.value[index].Tright = leftData
    }
    const getRightData3 = (leftData: ToothData[], index: number) => {
      ToothList3.value[index].Tright = leftData
    }
    const getRightData4 = (leftData: ToothData[], index: number) => {
      ToothList4.value[index].Tright = leftData
    }

    const getLeftBottomData = (leftData: ToothData[], index: number) => {
      ToothList.value[index].Bleft = leftData
    }
    const getLeftBottomData1 = (leftData: ToothData[], index: number) => {
      ToothList1.value[index].Bleft = leftData
    }
    const getLeftBottomData2 = (leftData: ToothData[], index: number) => {
      ToothList2.value[index].Bleft = leftData
    }
    const getLeftBottomData3 = (leftData: ToothData[], index: number) => {
      ToothList3.value[index].Bleft = leftData
    }
    const getLeftBottomData4 = (leftData: ToothData[], index: number) => {
      ToothList4.value[index].Bleft = leftData
    }

    const getRightBottomData = (leftData: ToothData[], index: number) => {
      ToothList.value[index].Bright = leftData
    }
    const getRightBottomData1 = (leftData: ToothData[], index: number) => {
      ToothList1.value[index].Bright = leftData
    }
    const getRightBottomData2 = (leftData: ToothData[], index: number) => {
      ToothList2.value[index].Bright = leftData
    }
    const getRightBottomData3 = (leftData: ToothData[], index: number) => {
      ToothList3.value[index].Bright = leftData
    }
    const getRightBottomData4 = (leftData: ToothData[], index: number) => {
      ToothList4.value[index].Bright = leftData
    }

    const getZhusu = (val: string) => {
      echoData.zhusuVal = val
    }
    const getXianbs = (val: string) => {
      echoData.xianbingshiVal = val
    }
    const getjiwangs = (val: string) => {
      echoData.jiwangsiVal = val
    }
    const getyizhu = (val: string) => {
      echoData.yizhuVal = val
    }

    const changValue = (val: string, index: number) => {
      ToothList.value[index].val = val
    }
    const changValue1 = (val: string, index: number) => {
      ToothList1.value[index].val = val
    }
    const changValue2 = (val: string, index: number) => {
      ToothList2.value[index].val = val
    }
    const changValue3 = (val: string, index: number) => {
      ToothList3.value[index].val = val
    }
    const changValue4 = (val: string, index: number) => {
      ToothList4.value[index].val = val
    }

    const dialogVisible = ref(false)
    const closeDialog = () => {
      dialogVisible.value = false
    }
    const dialogBtnData = [
      {
        name: '取消',
				func: (data:object) => {
					console.debug('取消',JSON.parse(JSON.stringify(data)))
          dialogVisible.value = false
				}
      },
      {
        name: '保存',
        func: (data:object) => {
					console.debug('保存',JSON.parse(JSON.stringify(data)))
          let otherObj = {} as any
          otherObj['主诉'] = echoData.zhusuVal
          otherObj['既往史'] = echoData.jiwangsiVal
          otherObj['现病史'] = echoData.xianbingshiVal
          otherObj['医嘱'] = echoData.yizhuVal
          otherObj['口腔检查'] = ToothList.value
          otherObj['辅助检查'] = ToothList1.value
          otherObj['治疗计划'] = ToothList3.value
          otherObj['诊断'] = ToothList2.value
          otherObj['处置'] = ToothList4.value

          let params = {
            id: echoData.id,
            customerId: id,
            type: echoData.type,
            doctorId: echoData.doctor,
            nurseId: echoData.nurse,
            seeDoctorTime: echoData.dateTime,
            labelIdsShow: echoData.label,
            remark: echoData.remark,
            actionChief: echoData.zhusuVal,
            other: otherObj
          }

          console.log(params,'保存')
          // 修改病历
          request.sendRequest({
            address: 'sick/history/updateMedicalHistory',
            params,
            success: (resp: RespData) => {
              if(resp.code !== 0) return ElMessage.error(resp.msg + '失败')
              ElMessage.success('修改成功')
              closeDialog()
              getList()
              console.log(resp.data)
            },
            fail: (resp: RespData) => {
              if(resp.code !== 0) return ElMessage.error(resp.msg)
              
            },
            method: "POST",
          }) 
				}
      }
    ]

    const deleteItem = (id: number) => {
      ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            request.sendRequest({
              address: `sick/history/delMedicalHistory/${id}`,
              params: {},
              success: (resp: RespData) => {
                if(resp.code !== 0) return ElMessage.error(resp.msg || '获取信息失败')
                ElMessage.success('删除成功')
                getList()
                console.log(resp.data)
              },
              fail: (resp: RespData) => {
                if(resp.code !== 0) return ElMessage.error(resp.msg)
                
              },
              method: "POST",
            }) 
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: '已取消删除',
            });
          });
      
      
    }
    const editItem = async (data: any) => {
      await getDoctorAndNurse()
      console.log('点击了编辑', data)
      let dataList = JSON.parse(data.other)

      echoData.id = data.id
      echoData.zhusuVal = data.actionChief
      echoData.doctor = data.doctorId
      echoData.nurse = data.nurseId
      echoData.dateTime = data.seeDoctorTime
      echoData.type = data.type
      echoData.remark = data.remark
      echoData.label = data.labelIdsShow

      echoData.xianbingshiVal = dataList['现病史']
      echoData.jiwangsiVal = dataList['既往史']
      echoData.yizhuVal = dataList['医嘱']
      
      ToothList.value = dataList['口腔检查']
      ToothList1.value = dataList['辅助检查']
      ToothList3.value = dataList['治疗计划']
      ToothList2.value = dataList['诊断']
      ToothList4.value = dataList['处置']

      
      
      dialogVisible.value = true
      
      
    }

    // 操作日志
    const openOperation = ref(false)
    const closeOperation = () => {
      openOperation.value = false
    }
    const OperationBtnData = [
      {
        name: '取消',
				func: (data:object) => {
					console.debug('取消',JSON.parse(JSON.stringify(data)))
          closeOperation()
				}
      }
    ]
    const operationData = ref([] as any[])
    // 获取操作日志
    const handleOperationLog = (data: any) => {
      console.log(data)
      let id = data.id
      request.sendRequest({
        address: `sick/history/getLogListById/${id}`,
        params: {},
        success: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error('获取日志' + resp.msg)
          openOperation.value = true
          operationData.value = resp.data
          console.log(resp.data)
        },
        fail: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error(resp.msg)
          
        },
        method: "GET",
      }) 
      // ElMessage('功能还在完善,敬请期待......');
    }

    const handlePrint = () => {
      ElMessage('功能还在完善,敬请期待......');
    }

    return {
      getList,
      ...toRefs(list),
      request,
      recordLists,
      arrList,
      seeDetails,
      isHide,
      temList,
      deleteItem,
      editItem,
      setOldDay,
      setAdditionalInfo,

      getLabel,

      ToothList,
      ToothList1,
      ToothList2,
      ToothList3,
      ToothList4,

      getLeftData,
      getLeftData1,
      getLeftData2,
      getLeftData3,
      getLeftData4,

      getRightData,
      getRightData1,
      getRightData2,
      getRightData3,
      getRightData4,

      getLeftBottomData,
      getLeftBottomData1,
      getLeftBottomData2,
      getLeftBottomData3,
      getLeftBottomData4,

      getRightBottomData,
      getRightBottomData1,
      getRightBottomData2,
      getRightBottomData3,
      getRightBottomData4,

      getZhusu,
      getXianbs,
      getjiwangs,
      getyizhu,
      changValue,
      changValue1,
      changValue2,
      changValue3,
      changValue4,

      addToothPosition,
      handleDelete,

      handleOperationLog,
      handlePrint,

      dialogVisible,
      closeDialog,
      dialogBtnData,

      openOperation,
      closeOperation,
      OperationBtnData,
      operationData,

      ...toRefs(echoData),
      labelList,
      searchLabelList,
    }
  }
})
</script>

<style lang="scss" scoped>
@import "@style/extend";
.record-item {
  display: flex;
}
.medical-detail {
  width: 100%;
  margin-bottom: 15px;
  .time {
    @extend .standard-4;
    color: #000;
    padding: 8px 0 12px 0;
  }
  .detail {
    display: flex;
    font-size: $fontSize;
    border: 1px solid #DCDFE6;
    .f-2 {
      flex: 2;
      position: relative;
      
      .detail-head {
        height: 30px;
        line-height: 30px;
        display: flex;
        background: $a2-Color;
        border-bottom: 1px solid #DCDFE6;
        user-select: none;
        .d-left {
          flex: 1;
          & > span {
            padding: 0 10px 0 20px;
            border-right: 1px solid $mainColor;
          }
          & > span:last-child {
            border: 0;
          }
        }
        .d-right {
          width: 70px;
          cursor: pointer;
          color: $mainColor;
          
          & > i {
            font-size: 20px;
            padding-top: 5px;
          }
        }
        }
      .d-content {
        box-sizing: border-box;
        padding: 0 0 0 20px;
        // height: 350px;
        // overflow: auto;
        margin-bottom: 40px;
        .d-example {
          // height: 40px;
          line-height: 40px;
          border-bottom: 1px solid $mainColor;
        }

        // 特殊
        .special-template {
          display: flex;
          align-items: center;
          .special-title {
            width: 100px;
          }
          .special-content {
            flex: 1;
            .one-every-particular {
              width: 100%;
              padding: 10px 15px;
              display: flex;
              align-items: center;
              box-sizing: border-box;
              .cross {
                min-width: 180px;
                line-height: 40px;
                // background: red;
                display: flex;
	              flex-wrap: wrap;

                .cross-left-top {
                  width: 50%;
                  // height: 50%;
                  height: 40px;
                  border-right: 1px solid #000;
                  border-bottom: 1px solid #000;
                  box-sizing: border-box;
                  text-align: right;
                  // background: blue;
                }

                .cross-right-top {
                  border-bottom: 1px solid #000;
                  box-sizing: border-box;
                  width: 50%;
                  height: 40px;
                  // height: 50%;
                  // background: yellow;
                }

                .cross-left-bottom {
                  width: 50%;
                  height: 40px;
                  // height: 50%;
                  border-right: 1px solid #000;
                  box-sizing: border-box;
                  text-align: right;
                }

                .cross-right-bottom {
                  box-sizing: border-box;
		              width: 50%;
                  height: 40px;
                  // height: 50%;
                  // background: green;
                }


              }
              .cross-text {
                padding-left: 100px
              }
            }
          }
        }

        .supernumerary {
          font-size: $fontSize;
          transform: scale(.6);
          position: relative;
          top: -5px;
        }
      }
      .d-footer {
        position: absolute;
        bottom: 0;
        left: 0;
        box-shadow: 0 0 1px #999;
        width: 100%;
        text-align: right;
        box-sizing: border-box;
        .btns {
          padding-right: 20px;
          height: 40px;
          line-height: 40px;
        }
        }
      
      
      .d-main-footer {
        height: 40px;
        line-height: 40px;
        & > span {
          @extend .standard-4;
          padding-left: 20px;
          span {
            @extend .standard-1;
            font-weight: 400;
          }
        }
      }
    }
    .f-1 {
      width: 16%;
      .head {
        height: 30px;
        line-height: 30px;
        background: $a2-Color;
        text-align: center;
        border-bottom: 1px solid #DCDFE6;
        display: flex;
        justify-content: space-evenly;
        color: $mainColor;
        user-select: none;
        & > span:last-child {
          padding-left: 5px;
        }
        span {
          cursor: pointer;
        }
      }

      .content {
        display: flex;
        font-size: $fontSize-1;
        height: calc(100% - 30px);
        border-left: 1px solid #DCDFE6;
        box-sizing: border-box;
        .c-info {
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            padding: 20px;
            // border-left: 1px solid #999;
            width: 100%;
            & > span {
              padding: 10px 0;

              .tags {
                padding: 10px 0;
                box-sizing: border-box;
                & > span {
                  margin-right: 5px;
                  margin-bottom: 10px;
                }
              }
            }
        }
      }
      .footer {
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-left: 1px solid #dcdfe6;
        box-sizing: border-box;
      }
    }
    
  }
}

.r90 {
  transform: rotate(-90deg);
}

.hide {
  display: none;
}

.p-b {
  margin: 0;
  padding-bottom: 20px;
}

.body-content {
  height: 600px;
  overflow: auto;
}
</style>